<template>
	<!--岗位详情 -->
	<view class="page-content">
		<view class="page-body">
			<view class="box-row">
				<view class="input-row">
					<view class="input-row-t"><text class="required" v-if="required">*</text>岗位名：</view>
					<input class="input-row-w" type="text" v-model="objdata.name" placeholder="请输入岗位名"
						placeholder-style="color:#999;fontSize:13px"></input>
				</view>
			</view>
			<view class="tip">管理员权限</view>
			<view class="body-box">
				<block v-for="(item,index) in objlist" :key="index">
					<view class="body-box-ul">
						<view class="body-box-li">
							<view class="name">{{item.name}}</view>
							<switch @change="switchChange(item.id)" color="#198FFF" :checked="item.statu"
								style="transform:scale(0.7)" />
						</view>

						<block v-for="(ite,ind) in item.list" :key="ind">
							<view class="body-box-li2">
								<view class="name">{{ite.name}}</view>
								<!-- <switch @change="switchChange(ite.id)" color="#198FFF" :checked="ite.statu"
									style="transform:scale(0.7)" /> -->
							</view>
						</block>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		addRoles,
		editRoles,
		getRoleInfos
	} from '@/common/api.js';
	import store from '@/store'
	import wTit from '@/components/w-tit/w-tit-back.vue';
	import brandUpload from '@/pages/components/brand_upload.vue';
	import {
		arrayNonRepeatfy
	} from '@/common/util.js'; //数组去重
	export default {
		components: {
			wTit,
			brandUpload
		},
		data() {
			return {
				required: false,
				objdata: {
					id: '',
					company_id: '',
					name: '',
					role: []
				},
				objlist: [{
					name: '基础设置',
					statu: true,
					id: 1,
					list: [{
						name: '产品属性',
					}, {
						name: 'POP编码',
					}, {
						name: '道具编码',
					}, {
						name: 'POP道具',
					}, {
						name: '供应商报价单',
					}]
				}, {
					name: '功能管理',
					statu: false,
					id: 2,
					list: [{
						name: 'POP画册管理',
					}, {
						name: 'POP下单管理',
					}, {
						name: '道具下单管理',
					}, {
						name: '数据统计功能',
					}]

				}, {
					name: '新闻/公告管理',
					statu: false,
					id: 3,
					list: [{
						name: '新闻管理',
					}, {
						name: '公告&通知管理',
					}, {
						name: '动态管理',
					}]

				}, {
					name: '团队管理',
					statu: false,
					id: 4,
					list: [{
						name: '成员邀请',
					}, {
						name: '移除成员',
					}, {
						name: '组别管理',
					}]
				}],
				pageType: '',
				id: '',
			}
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo']),
		},
		onLoad(option) {
			console.log(222, option)
			if (option.type === 'add') {
				this.pageType = option.type;

			} else if (option.type === 'edit') {
				this.pageType = option.type;
				this.objdata.name = option.name;
				if (option.id) {
					this.objdata.id = option.id
					this.getdetail();
				}

			}
		},
		//导航按钮
		onNavigationBarButtonTap(e) {
			console.log(23, e)
			if (e.index == 0) {
				this.tosave();
			}
		},
		methods: {
			...mapActions('user', ['setToken']),
			arrayNonRepeatfy,
			getdetail() {
				getRoleInfos({
					id: this.objdata.id
				}).then(res => {
					if (res.code === 2000) {
						this.objdata = res.data;
						if (res.data.role && res.data.role.length > 0) {
							res.data.role.forEach(item => {
								if (this.objlist && this.objlist.length > 0) {
									this.objlist.forEach(ite => {
										if (ite.id === item) {
											ite.statu = true
										}
									})
								}
							})
						}
					}
					console.log(99, this.objlist)
				})
			},
			//switch
			switchChange(id) {
				this.objdata.role = [];
				if (this.objlist && this.objlist.length > 0) {
					this.objlist.forEach(item => {
						if (item.id === id) {
							item.statu = !item.statu
						}
						/* item.list.forEach(ite=>{
							if(ite.id === id){
								ite.statu = !ite.statu
							}
						}) */
					})
				}
			},
			//保存
			tosave() {
				if (!!this.companyInfo) {
					this.objdata.company_id = this.companyInfo.id
				}
				let resdata = this.objdata;
				if (resdata.name === "") {
					uni.showToast({
						title: "岗位名称不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.objlist && this.objlist.length > 0) {
					this.objlist.forEach(item => {
						if (item.statu) {
							resdata.role.push(item.id)
						}
					})
				}
				console.log(2222, resdata.role)

				if (this.pageType === 'add') {
					addRoles(resdata).then(res => {
						console.log(123, res)
						if (res.code === 2000) {
							uni.navigateBack({
								delta: 1
							})
							setTimeout(() => {
								uni.showToast({
									title: '添加成功！',
									icon: 'none',
									duration: 2000
								})
							}, 100)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else if (this.pageType === 'edit') {
					editRoles(resdata).then(res => {
						console.log(123, res)
						if (res.code === 2000) {
							uni.navigateBack({
								delta: 1
							})
							setTimeout(() => {
								uni.showToast({
									title: '修改成功！',
									icon: 'none',
									duration: 2000
								})
							}, 100)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
	}

	.icon-tb {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		background: $uni-bg-color;
		width: 100vw;
		height: 100%;
		border-top: 1rpx solid #f5f5f5;

		.body-box {
			.body-box-ul {
				display: flex;
				flex-direction: column;
				padding: 0 30rpx;
				border-bottom: 10rpx solid #f5f5f5;

				.body-box-li {
					padding: 0 20rpx;
					line-height: 100rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #f5f5f5;

					.name {
						font-size: 32rpx;
						font-weight: 400;
						font-weight: bold;
						color: $font-color-3;
					}
				}

				.body-box-li2 {
					padding: 0 20rpx;
					line-height: 100rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-3;
					}
				}
			}
		}

		.page-body {
			display: flex;
			flex-direction: column;

			.tip {
				height: 50rpx;
				background: $uni-bg-color-grey;
				font-size: 22rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: $font-color-9;
				padding: 0 50rpx;
				line-height: 50rpx;
			}

			.box-row {
				padding: 0 50rpx;

				.input-row {
					display: flex;
					align-items: center;
					width: 100%;
					height: 100rpx;
					flex-direction: row;
					background: $uni-bg-box-color;

					.input-row-w {
						display: flex;
						flex: 1;
						width: 100%;
						color: $font-color-3;
						font-size: 32rpx;
					}

					.input-row-t {
						font-size: 32rpx;
						color: #333333;
					}
				}
			}

			.btn-row {
				width: 100%;
				padding: 0 30rpx;

				button {
					line-height: 100rpx;
					background: $uni-but-bg-color;
					font-size: 36rpx;
					color: $font-color-w;
					height: 100rpx;
					box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.19);
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
